<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>

</head>
<body>
<div layout:fragment="content">
    <Row :gutter="16" class="g-fixgutter">
        <i-col span="12">
            <Tree ref="treeData" :data="treeData" :multiple="true" show-checkbox></Tree>
        </i-col>
        <i-col span="12">
            <i-form :model="form" :rules="ruleValidate" label-position="top">
                <Form-item label="角色编码" prop="roleKey">
                    <i-input v-model="form.roleKey"></i-input>
                </Form-item>
                <Form-item label="角色名称" prop="name">
                    <i-input v-model="form.name"></i-input>
                </Form-item>
                <!--<Form-item label="类型">-->
                    <!--<i-select v-model="form.type">-->
                        <!--<i-option value="normol" label="一般"></i-option>-->
                        <!--<i-option value="zhicheng" label="支撑人员管理可用"></i-option>-->
                    <!--</i-select>-->
                <!--</Form-item>-->
                <!--<Form-item label="角色类型">-->
                    <!--<radio-group v-model="form.status">-->
                        <!--<Radio :label="1">内部角色</Radio>-->
                        <!--<Radio :label="2">公开角色</Radio>-->
                    <!--</radio-group>-->
                <!--</Form-item>-->
            </i-form>
        </i-col>
    </Row>

</div>

<script layout:fragment="script">
    const m_apis = {
        getTreeForUser(p_page, p_pageSize) {
            return PB.apiRoute('/api/sys/menu/getTreeForUser', 'GET');
        },
        getModel(p_id) {
            return PB.apiRoute('/api/sys/role/getModel?id=' + p_id, 'GET');
        },
        save(p_body) {
            return PB.apiRoute('/api/sys/role/save', 'POST', p_body);
        },
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                treeData: [],
                form: {
                    status: 1
                },
                ruleValidate: {
                    roleKey: [
                        {required: true, message: '编码不能为空', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '名称不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            if (!PB.getPara('id')) {
                this.initTree();
            }
            else {
                this.getModel(PB.getPara('id'));
            }

        },
        methods: {
            treePowerRender(h, {root, node, data}) {
                return h('span', {
                    'class': {
                        'ivu-tree-title': true
                    },
                    on: {
                        click: () => {
                            this.onSelNode([data])
                        }
                    },
                    domProps: {
                        innerHTML: '<span style="color: red">' + data.key + ' ' + data.name + '</span>'
                    },
                })
            },
            initTree() {
                let that = this;
                PB.ajax(this.apis.getTreeForUser(), function (d) {
                    let menuData = d.data;
                    that.treeData = loadTreeData(menuData);
                });


                function loadTreeData(menuData) {
                    let arr = [];
                    for (let info of menuData) {
                        let node = {};

                        //node.expand = true;
                        node.key = info.menuKey;
                        node.title = info.name;
                        //node.checked = false; // 为了避免顶级true导致子级就算是false都会显示已经选中，所以，所有checked属性不要设置，由子级来控制选中状态

                        let ch = [];
                        if (info.power) {
                            for (let module_power of info.power) {
                                let power_node = {};
                                power_node.render = that.treePowerRender;
                                power_node.key = module_power.powerKey;
                                power_node.name = module_power.name;
                                power_node.checked = chk(module_power.powerKey);

                                ch.push(power_node);
                            }
                        }

                        if (info.children) {
                            ch = ch.concat(loadTreeData(info.children));
                        }
                        node.children = ch;
                        arr.push(node);

                    }
                    return arr;
                }

                function chk(p_key) {
                    if (!that.form.id) {
                        return false;
                    }

                    let power = that.form.power;
                    if (!power) {
                        return false;
                    }
                    let arrKey = power.split(',');
                    if (arrKey.includes(p_key)) {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
            },
            getModel(id) {
                let that = this;
                PB.ajax(this.apis.getModel(id), function (d) {
                    that.form = d.data;
                    that.initTree();
                });
            },
            save() {
                let selNodes = this.$refs['treeData'].getCheckedNodes();
                let keys = selNodes.map(q => q.key).toString();
                this.form.power = keys;

                PB.ajax(this.apis.save(this.form), {isInFramePage: true}, function (d) {
                    PB.formPageSaveOK(d);
                });

            }
        }
    });

    function save() {
        vm.save();
    }
</script>
</body>
</html>
